<template>
    <section class="information">
        <wioc-card shadow="shadow" border="radius" :title="headInfo.title" titlesize="small" style="margin-top: 0.1rem">
            <div slot="title-before" class="titleBefore">
                <wioc-icon-svg :name="headInfo.icon"></wioc-icon-svg>
            </div>
            <div slot="sub-title" v-if="headInfo.tag" class="titleSub">
                <wioc-list-tags :taglist="headInfo.tag"></wioc-list-tags>
            </div>
            <div slot="title" v-if="headInfo.time" class="time">{{headInfo.time|formatDate('yyyy-MM-dd')}}</div>
            <div class="detailsInfo" style="padding-top: 0.07rem" >
                <slot></slot>
                <slot name="body"></slot>
            </div>
        </wioc-card>
    </section>
</template>

<script>
    export default {
        name: "wioc-information-card",
        props:{
          headInfo:{
              type:Object,
              default:()=>({
                  icon:'',
                  title:'',
                  tag:'',
                  time:''
              })
          }
        },
        data(){
            return{
            }
        }
    }
</script>

<style lang="less" scoped>
    .information{
        font-family: PingFangSC-Regular;
        .wioc-card {
            /deep/ .title{
                display: flex;
                flex-direction: row;
				font-size:0;
                .small{
                    padding-top: 0.04rem;
                    font-family: PingFangSC-Regular;
                    font-size: 0.15rem;
                    color: #595959;
                    letter-spacing: -0.13px;
                }
                .titleBefore{
                    //flex:1;
                    width: 0.23rem;
                    height: 0.23rem;
                    padding-right: 0.05rem;
                }
                .titleSub{
                    flex:1;
                    padding-left: 0.07rem;
                    .wioc-list-tags li{
                        padding: 0 0.04rem;
                        margin: unset;
                        line-height: 0.21rem;
                    }
                }
                .time{
                    flex:2;
					font-size: 0.14rem;
                    padding-top: 0.02rem;
                }
            }
            /deep/  .content {
                padding-top: 0.08rem;
                .detailsInfo{
                    border-top: 0.01rem solid #EBEDF8;
                }
            }

        }



    }
</style>
